import InitParticles from '@/components/InitParticles/InitParticles';
import { message } from 'antd';
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useImmer } from 'use-immer';
import './Login.less';

const Login: React.FC = () => {
  const accountValue = {
    user: 'admin',
    password: 'admin',
  };

  const navigate = useNavigate();

  const [account, setAccount] = useImmer({
    user: '',
    password: '',
  });

  const loginIn = () => {
    if (account.user === accountValue.user && account.password === accountValue.password) {
      navigate('/home');
      message.success('登录成功');
    } else {
      message.error('账号或密码错误');
    }
  };

  // const keydown = (event: KeyboardEvent) => {
  //   if(event.key === 'Enter') {
  //     console.log(event)
  //     loginIn()
  //   }
  // };

  // useEffect(() => {
  //   window.addEventListener('keypress', (event) => keydown(event));
  //   return () => {
  //     window.removeEventListener('keypress', (event) => keydown(event));
  //   };
  // });

  return (
    <div>
      
      <div className="login">
        <div className="login_container">
          <div>{import.meta.env.VITE_APP_TITLE}</div>
          <div className="login_input">
            <span>账号:</span>
            <input
              type="text"
              value={account.user}
              placeholder="请输入账号"
              onChange={(e) => {
                setAccount((draft) => {
                  draft.user = e.target.value;
                });
              }}
            />
          </div>
          <div className="login_input">
            <span>密码:</span>
            <input
              type="password"
              value={account.password}
              placeholder="请输入密码"
              onChange={(e) => {
                setAccount((draft) => {
                  draft.password = e.target.value;
                });
              }}
            />
          </div>
          <button className="login_button" onClick={loginIn}>
            登录
          </button>
        </div>
      </div>
    </div>
  );
};

export default Login;
